<template>
    <div class="SAhome">
        <cjcNav title="建言献策(校领导)" @customRouter="customRouter" />
        <swiper class="SAswiper" :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
            <swiper-slide>
                <!-- 图表一 -->
                <pendChartOne/>
            </swiper-slide>
            <swiper-slide>
                <!-- 图表二 -->
                <pendChartTwo/>
            </swiper-slide>
            <swiper-slide>
                <!-- 图表三 -->
                <pendChartThree/>
            </swiper-slide>
            <swiper-slide>
                <!-- 图表四 -->
                <pendChartFour/>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <div class="pending" @click="toLink('pending', true)">
            查看待处理的建议
            <span class="text">>></span>
        </div>
    </div>
</template>

<script>
// import

export default {
    name: 'productionSwiper',
    components: {
        cjcNav: () => import('@/components/common/Nav.vue'),
        pendChartOne: () => import('@/components/schoolAuthority/pendChartOne'),
        pendChartTwo: () => import('@/components/schoolAuthority/pendChartTwo'),
        pendChartThree: () => import('@/components/schoolAuthority/pendChartThree'),
        pendChartFour: () => import('@/components/schoolAuthority/pendChartFour'),
    },
    data() {
        return {
            notNextTick: true,
            swiperOption: {
                autoplay: 5000, // 循环时间
                effect: 'slide', // 滚动方式
                // loop: true,
                grabCursor: true,
                centeredSlides: true,
                initialSlide: 0, // 初始展示列表
                slidesPerView: 1, // 每页展示列表
                prevButton: '.swiper-button-prev', // 上一页
                nextButton: '.swiper-button-next', // 下一页
                slideToClickedSlide: true,
                onTransitionStart: (swiper) => {
                    this.activeIndex = swiper.activeIndex
                }
            },
            activeIndex: 1
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
    methods: {
        customRouter() {
            this.$cjc.closeWebView()
        },
        toLink(link, SF) {
            sessionStorage.setItem('SF', SF)
            this.$router.push({
                name: link
            })
        },
        slideTo(number) {
            this.swiper.slideTo(number, 0, false)
        }
    },
    created() {
        const Vm = this
        // 如果从SAbyEventIdLi跳改列表初始化值
        if (Vm.$route.params.hf === 'SAbyEventIdList') {
            Vm.swiperOption.initialSlide = 1
        }
        /**
         * 设置建议状态列表
         */
        async function setCountEventByStatus() {
            let CountEventByStatus = await Vm.$store.dispatch('getCountEventByStatus')
            Vm.$store.commit('SET_CountEventByStatus', CountEventByStatus.result)
        }
        /**
         * 设置建议类型统计列表
         */
        async function setCountEvent() {
            let CountEvent = await Vm.$store.dispatch('getCountEventByType')
            Vm.$store.commit('SET_CountEvent', CountEvent.result)
        }
        /**
         * 设置建议处理数TOP10
         */
        async function setCountTopList() {
            let CountTopList = await Vm.$store.dispatch('getCountTopList')
            Vm.$store.commit('SET_CountTopList', CountTopList.result)
        }
        /**
         * 设置建议处理时间分析
         */
        async function setCountTime() {
            let CountTime = await Vm.$store.dispatch('getCountTime')
            Vm.$store.commit('SET_CountTime', CountTime.result)
        }
        /**
         * 执行步骤
         */
        async function Step() {
            setCountEventByStatus()
            setCountEvent()
            setCountTopList()
            setCountTime()
        }
        Step()
    },
    mounted() {
        // you can use current swiper instance object to do something(swiper methods) 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        this.swiper.onResize()
    }
}
</script>

<style lang="less">
.nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 70vh;
    background-color: #fff;
    .text{
        font-size: 14px;
    }
    img {
        width: 40%;
    }
}
.SAhome {
    .nav .title {
        font-size: 15px;
        letter-spacing: 0;
    }
    .SAswiper {
        .swiper-button-next,
        .swiper-button-prev {
            height: 24px;
            margin-top: -52px;
        }
    }
    .pending {
        width: 100%;
        height: 60px;
        border-top: 1px solid #e9e9e9;
        font-size: 14px;
        line-height: 60px;
        text-align: center;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        .text {
            color: rgb(45, 140, 240);
        }
    }
}
</style>
